import React, { FC } from "react";
import { Typography, Col, Row, Button, Form, Input, message, Space } from 'antd'
import styles from "./Register.module.scss";
import { Link, useNavigate } from "react-router-dom";
import { registerService } from '../services/user'
import { useRequest } from 'ahooks'


const { Title } = Typography
type FieldType = {
    username?: string;
    password?: string;
    nickname?: string;
    Repassword?: string
};
const Register: FC = () => {
    const nav = useNavigate()
    const { run } = useRequest(async values => {
        const { username, password, nickname } = values
        await registerService(username, password, nickname)
    }, {
        manual: true,
        onSuccess() {
            message.success('注册成功')
            nav('/login')
        }
    })

    const onFinish = (values: any) => {
        run(values)
    }
    return <div className={styles.container}>
        <Row align={'middle'} className={styles.conent}>
            <Col className={styles.form} xs={{ span: 24, offset: 0 }} lg={{ span: 8, offset: 8 }} >
                <div>
                    <Title className={styles.title} level={2}>注册</Title>
                </div>
                <div>
                    <Form
                        name="basic"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 16 }}
                        onFinish={onFinish}
                    >
                        <Form.Item<FieldType>
                            label="用户名"
                            name="username"
                            rules={[
                                { required: true, message: 'Please input your username!' },
                                { type: 'string', max: 11, min: 5, message: '请输入5到11位用户名' },
                                { pattern: /^\w+$/, message: '只能为数字字母下划线' },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item<FieldType>
                            label="密码"
                            name="password"
                            rules={[
                                { required: true, message: 'Please input your password!' }
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item<FieldType>
                            label="确认密码"
                            name="Repassword"
                            dependencies={['password']}
                            //依赖于 password，password变化触发validator
                            rules={[
                                { required: true, message: 'Please input your password!' },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve()
                                        } else {
                                            return Promise.reject(new Error('两次密码不一致'))
                                        }
                                    }
                                })
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item<FieldType>
                            label="昵称"
                            name="nickname"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Space>
                                <Button type="primary" htmlType="submit">
                                    注册
                                </Button>
                                <Link className={styles.buttons} to={'/login'}>已有账户,去登录</Link>
                            </Space>
                        </Form.Item>
                    </Form>
                </div>
           
        </Col>
    </Row>
    </div >
}

export default Register